<template>
  
  <div class="recommend">
    <div v-for='item in recommends' :key="item.id" class="recommend-item">
      <a :href="item.link">
   <img :src="item.image" alt="">
   <div>{{item.title}}</div>
 </a>
    </div>
 
  </div>
</template>

<script>
export default {
name:'homerecommendview',
props:{
  recommends:{
    type:Array,
    default(){
      return []
    }
  }
}
}
</script>

<style>
.recommend{
display: flex;
width: 100%;
font-size: 12px;
margin-top: 12px;
  text-align: center;

padding: 10px 0 20px ;
border-bottom: 8px solid #eee;
}
.recommend-item{
flex: 1;
}
.recommend-item img {
  width: 65px;
  height: 65px;
  text-align: center;
}
</style>